<template>
  <div class="hello">
    <span>子组件二</span>
    <button @click="add10RMB">10元红包</button>
    <!-- $store.state.count -->
    <span>红包总金额：{{ count }}元</span>
    <br />
    <button @click="clearRMB">清零</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {};
  },
  computed: {
    // 语法糖：实际是 this.$store.state.count
    ...mapState(["count"]),
  },
  components: {},
  mounted() {},
  methods: {
    // 语法糖：实际是 this.$store.commit('add10RMB')
    ...mapMutations(["add10RMB"]),
    // 语法糖：实际是 this.$store.dispatch('clearRMB')
    ...mapActions(["clearRMB"]),

    // add10RMB() {
    //   this.$store.commit("add10RMB");
    // },
    // clearRMB() {
    //   this.$store.dispatch("clearRMB");
    // }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>
